<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:body>
        <ui:composition template="./../template/main.xhtml">
            <ui:define name="content">
                 <h1 class="title ui-widget-header ui-corner-all ">Quản Lý Cửa Hàng</h1>
                <p:messages id="messages" autoUpdate="true" showDetail="true" closable="true"/>
                <h:form id="formDataTable">
                    <p:panel header="Tìm kiếm" style="margin-bottom: 20px; width: 500px">
                    
                        <h:panelGrid columns="2" styleClass="my-panel-grid">
                            <p:outputLabel for="province" value="Tỉnh/Thành phố:"/>
                            <p:selectOneMenu id="province" value="#{storeController.selectedProvince.id}">
                                <f:selectItem itemValue="#{0}" itemLabel="Chọn tỉnh/thành phố"/>
                                <f:selectItems value="#{storeController.provinceList}" var="provinceList" 
                                               itemValue="#{provinceList.id}" itemLabel="#{provinceList.name}"/>
                                <p:ajax update="district, store"/>
                            </p:selectOneMenu>

                            <p:outputLabel for="district" value="Quận/Huyện:"/>
                            <p:selectOneMenu id="district" value="#{storeController.selectedDistrict.id}">
                                <f:selectItem itemValue="#{0}" itemLabel="Chọn quận/huyện"/>
                                <f:selectItems value="#{storeController.districtList}" var="districtList" 
                                               itemValue="#{districtList.id}" itemLabel="#{districtList.name}"/>
                                <p:ajax update="store"/>
                            </p:selectOneMenu>

                            <p:outputLabel for="store" value="Cửa hàng:"/>
                            <p:selectOneMenu id="store" value="#{storeController.selectedStore.id}">
                                <f:selectItem itemValue="#{0}" itemLabel="Chọn cửa hàng"/>
                                <f:selectItems value="#{storeController.filterStores}" var="storeList" 
                                               itemValue="#{storeList.id}" itemLabel="#{storeList.name}"/>
                            </p:selectOneMenu>
                            
                            <p:commandButton id="searchButton" update=":formDataTable:storeForm" actionListener="#{storeController.search()}" icon="ui-icon" value="Tìm"/>
                        </h:panelGrid>
                        
                    </p:panel>
                    
                    <p:panel style="margin-bottom: 20px; width: 500px">
                    
                        <h:panelGrid columns="3" styleClass="my-panel-grid">
                            <p:outputLabel value="Cửa hàng:"/>
                            <p:autoComplete value="#{storeController.selectedStoreComplete.id}" 
                                            completeMethod="#{storeController.completeStore}" 
                                            var="p" itemLabel="#{p.name}" itemValue="#{p.id}" forceSelection="true">
                            </p:autoComplete>
                            <p:commandButton id="searchStoreButton" update=":formDataTable:storeForm" actionListener="#{storeController.searchStore()}" icon="ui-icon" value="Tìm"/>
                        </h:panelGrid>
                    </p:panel>
                    
                    <p:dataTable style="text-align: center" id="storeForm" var="store" value="#{storeController.storeList}" paginator="true" rows="10" paginatorPosition="bottom" 
                                 paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}" rowsPerPageTemplate="5,10,15" 
                                 emptyMessage="Không có cửa hàng">

                        <p:column headerText="Id" sortBy="#{store.id}" filterBy="#{store.id}">
                            <h:outputLabel value="#{store.id}" />
                        </p:column>

                        <p:column headerText="Tên" sortBy="#{store.name}" filterBy="#{store.name}">
                            <h:outputLabel value="#{store.name}" />
                        </p:column>
                        
                        <p:column headerText="Tỉnh/Thành phố" filterBy="#{store.province.name}">
                            <h:outputLabel value="#{store.province.name}" />
                        </p:column>
                        
                        <p:column headerText="Quận/Huyện" filterBy="#{store.district.name}">
                            <h:outputLabel value="#{store.district.name}" />
                        </p:column>
                        <p:column headerText="Điện thoại" filterBy="#{store.phone}">
                            <h:outputLabel value="#{store.phone}"/>
                        </p:column>

                        <p:column headerText="Ảnh" >
                            <h:outputLabel value="#{store.image}"/>
                        </p:column>

                        <p:column headerText="Giờ mở cửa" >
                            <h:outputLabel value="#{store.openHour}"/>
                        </p:column>
                        
                        <p:column headerText="Vĩ độ" >
                            <h:outputLabel value="#{store.lat}"/>
                        </p:column>
                        
                        <p:column headerText="Kinh độ" >
                            <h:outputLabel value="#{store.lng}"/>
                        </p:column>

                        <p:column>
                            <p:commandButton id="btnUpdate" update=":updateForm" action="#{storeController.resetFilePath()}" oncomplete="PF('updateDialog').show()" icon="ui-icon ui-icon-wrench" title="Sửa">
                                <f:setPropertyActionListener value="#{store}" target="#{storeController.selectedStore}" />  
                            </p:commandButton>
                            <p:commandButton id="btnDelete" update=":deleteForm" oncomplete="PF('confirmation').show()" icon="ui-icon ui-icon-closethick" title="Xóa">
                                <f:setPropertyActionListener value="#{store}" target="#{storeController.selectedStore}" />  
                            </p:commandButton>
                        </p:column>
                        
                    </p:dataTable>
                    
                    <p:commandButton id="btnInsert" action="#{storeController.resetSelectedStore()}" update=":insertForm" oncomplete="PF('insertDialog').show()" icon="icon-create" title="Thêm" value="Thêm"/>
                </h:form>
                <!-- Insert -->
                <h:form id="insertForm">
                    <p:dialog header="Thêm" widgetVar="insertDialog" resizable="false" 
                              showEffect="fade" hideEffect="fade" modal="true">
                        <h:panelGrid columns="2" style="margin: 10px;" styleClass="my-panel-grid">

                            <p:outputLabel for="province" value="Tỉnh/Thành phố:"/>
                            <p:selectOneMenu id="province" value="#{storeController.selectedProvince.id}">
                                <f:selectItem itemValue="#{0}" itemLabel="Chọn tỉnh/thành phố"/>
                                <f:selectItems value="#{storeController.provinceList}" var="provinceList" 
                                               itemValue="#{provinceList.id}" itemLabel="#{provinceList.name}"/>
                                <p:ajax update="district"/>
                            </p:selectOneMenu>

                            <p:outputLabel for="district" value="Quận/Huyện:"/>
                            <p:selectOneMenu id="district" value="#{storeController.selectedDistrict.id}">
                                <f:selectItem itemValue="#{0}" itemLabel="Chọn quận/huyện"/>
                                <f:selectItems value="#{storeController.districtList}" var="districtList" 
                                               itemValue="#{districtList.id}" itemLabel="#{districtList.name}"/>
                            </p:selectOneMenu>
                            
                            <h:outputLabel for="name" value="Tên:"/>
                            <p:inputText id="name" value="#{storeController.selectedStore.name}"/>  

                            <h:outputLabel for="phone" value="Điện thoại:" />
                            <p:inputText id="phone" value="#{storeController.selectedStore.phone}" />

                            <h:outputLabel for="address" value="Địa chỉ:" />
                            <p:inputText id="address" value="#{storeController.selectedStore.address}" />
                            
                            <h:outputLabel for="fax" value="Fax:" />
                            <p:inputText id="fax" value="#{storeController.selectedStore.fax}" />
                            
                            <h:outputLabel for="a" value="Email:" />
                            <p:inputText id="a" value="#{storeController.selectedStore.email}" />
                            
                            <h:outputLabel for="b" value="Mô tả:" />
                            <p:inputText id="b" value="#{storeController.selectedStore.description}" />
                            
                            <h:outputLabel for="c" value="Giờ mở cửa:" />
                            <p:inputText id="c" value="#{storeController.selectedStore.openHour}" />
                            
                            <h:outputLabel for="d" value="Kinh độ:" />
                            <p:inputText id="d" value="#{storeController.selectedStore.lat}" />
                            
                            <h:outputLabel for="e" value="Vĩ độ:" />
                            <p:inputText id="e" value="#{storeController.selectedStore.lng}" />

                            <h:outputLabel value="Ảnh:" />
                            <p:fileUpload fileUploadListener="#{storeController.handleFileUpload}" mode="advanced" dragDropSupport="false" 
                                          multiple="false" sizeLimit="5000000" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>

                            <f:facet name="footer">
                                <p:separator/>
                                <p:commandButton id="btnCreateAccept" actionListener="#{storeController.insert()}" update=":formDataTable:storeForm, :messages" oncomplete="insertDialog.hide()" icon="ui-icon" title="Thêm" value="Thêm"/>
                                <p:commandButton id="btnCreateCancel" oncomplete="insertDialog.hide();" icon="icon-create" title="Hủy bỏ" value="Hủy bỏ"/>
                            </f:facet>
                        </h:panelGrid>
                    </p:dialog>  
                </h:form>
                <h:form id="updateForm">
                    <p:dialog header="Sửa" widgetVar="updateDialog" resizable="false"
                              showEffect="fade" hideEffect="fade" modal="true">  
                        
                        <h:panelGrid id="display" columns="2" cellpadding="4" style="margin:10px;" styleClass="my-panel-grid">
                            <p:outputLabel for="province" value="Tỉnh/Thành phố:"/>
                            <p:selectOneMenu id="province" value="#{storeController.selectedStore.province.id}">
                                <f:selectItems value="#{storeController.provinceList}" var="provinceList" 
                                               itemValue="#{provinceList.id}" itemLabel="#{provinceList.name}"/>
                                <p:ajax update="district"/>
                            </p:selectOneMenu>

                            <p:outputLabel for="district" value="Quận/Huyện:"/>
                            <p:selectOneMenu id="district" value="#{storeController.selectedStore.district.id}">
                                <f:selectItems value="#{storeController.updateDistrictList}" var="districtList" 
                                               itemValue="#{districtList.id}" itemLabel="#{districtList.name}"/>
                            </p:selectOneMenu>
                            
                            <h:outputLabel for="name" value="Tên:"/>
                            <p:inputText id="name" value="#{storeController.selectedStore.name}"/>  

                            <h:outputLabel for="phone" value="Điện thoại:" />
                            <p:inputText id="phone" value="#{storeController.selectedStore.phone}" />

                            <h:outputLabel for="address" value="Địa chỉ:" />
                            <p:inputText id="address" value="#{storeController.selectedStore.address}" />
                            
                            <h:outputLabel for="fax" value="Fax:" />
                            <p:inputText id="fax" value="#{storeController.selectedStore.fax}" />
                            
                            <h:outputLabel for="a" value="Email:" />
                            <p:inputText id="a" value="#{storeController.selectedStore.email}" />
                            
                            <h:outputLabel for="b" value="Mô tả:" />
                            <p:inputText id="b" value="#{storeController.selectedStore.description}" />
                            
                            <h:outputLabel for="c" value="Giờ mở cửa:" />
                            <p:inputText id="c" value="#{storeController.selectedStore.openHour}" />
                            
                            <h:outputLabel for="d" value="Kinh độ:" />
                            <p:inputText id="d" value="#{storeController.selectedStore.lat}" />
                            
                            <h:outputLabel for="e" value="Vĩ độ:" />
                            <p:inputText id="e" value="#{storeController.selectedStore.lng}" />

                            <h:outputLabel value="Ảnh:" />
                            <h:outputLabel value="#{storeController.selectedStore.image}" />
                            
                            <h:outputLabel value="Up ảnh:" />
                            <p:fileUpload fileUploadListener="#{storeController.handleFileUpload}" mode="advanced" dragDropSupport="false" 
                                          multiple="false" sizeLimit="5000000" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>
                            

                            <f:facet name="footer">
                                <p:separator/>
                                <p:commandButton id="btnUpdateAccept" actionListener="#{storeController.update()}" update=":formDataTable, :messages" oncomplete="updateDialog.hide();" icon="icon-create" title="Update" value="Update"/>
                                <p:commandButton id="btnUpdateCancel" action="#{storeController.resetSelectedStore()}" oncomplete="updateDialog.hide();" icon="icon-cancel" title="Cancel" value="Cancel"/>
                            </f:facet>
                        </h:panelGrid>  
                    </p:dialog>  
                </h:form>
                <h:form id="deleteForm">
                    <p:confirmDialog closable="false" showEffect="fade" hideEffect="fade" severity="alert" widgetVar="confirmation"
                                     message="Xóa cửa hàng?" header="Xóa cửa hàng" style="margin:5px auto;">
                        <h:panelGroup layout="block" style="text-align: right">
                            <p:commandButton value="Đồng ý" action="#{storeController.delete()}" oncomplete="confirmation.hide();" update=":formDataTable:storeForm, :messages" />
                            <p:commandButton value="Hủy bỏ" action="#{storeController.resetSelectedStore()}" oncomplete="confirmation.hide();" />
                        </h:panelGroup>
                    </p:confirmDialog>
                </h:form>
            </ui:define>
        </ui:composition>
    </h:body>
</html>